<template>
  <div class="app-container" v-if="!hasGuide">
    <aside>
      <!-- 基于  https://github.com/kamranahmedse/driver.js -->
      {{ '欢迎来到星云管理后台，想要快速了解本系统功能，你可以点击下方按钮' }}
    </aside>
    <el-button
      icon="el-icon-question"
      type="primary"
      @click.prevent.stop="guide"
    >
      {{ '打开引导' }}
    </el-button>
  </div>
</template>

<script lang="ts">
import Driver, { Step } from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { Component, Vue, Watch } from 'vue-property-decorator'
import steps from './steps'
import { UserModule } from '@/store/modules/user'
import { getGuideKey, setGuideKey } from '@/utils/cookies.ts'
@Component({
  name: 'Guide'
})
export default class extends Vue {
  private driver: Driver | null = null
  get menuLoading() {
    return UserModule.menuRendering
  }
  get hasGuide() {
    let hasGuideKey = getGuideKey()
    return hasGuideKey === 'yes'
  }
  // 监听menu加载完成启用guide
  @Watch('menuLoading')
  private onMenuLoadingChange(menuLoading: boolean) {
    if (!menuLoading) {
      this.guide()
    }
  }
  mounted() {
    this.driver = new Driver({
      doneBtnText: '完成', // Text on the last button
      closeBtnText: '关闭', // Text on the close button
      nextBtnText: '下一步', // Next button text
      prevBtnText: '上一步' // Previous button text
    })
    this.$nextTick(() => {
      // 只有当菜单栏加载完成后才开始cookie设置，不然页面两次进入guide页会出现不加载效果
      if (!this.menuLoading) {
        if (this.hasGuide || UserModule.menuTree.length === 0) {
          this.$router.push('/')
        } else {
          setGuideKey('yes')
        }
      }
    })
  }

  private guide() {
    if (this.driver) {
      this.driver.defineSteps(steps)
      this.driver.start()
    }
  }
}
</script>
